 <template>
  <div class="homeBanner-wrapper">
    <el-carousel height="3.14rem">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <a :href="item.href">
          <img :src="constant.api_url + item.picture" :alt="item.title">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script type="text/ecmascript-6">
import constant from "../utils/constant.js";
// 引用API文件
import http from "../utils/http.js";
export default {
  name: "banner",
  data() {
    return {
      banners: [
        // {
        //   id: 1,
        //   title: "1.png",
        //   href: "wwww.baidu.com",
        //   src: require("@/assets/images/banner_01.png")
        // },
        // {
        //   id: 2,
        //   title: "2.png",
        //   href: "wwww.baidu.com",
        //   src: require("@/assets/images/banner_01.png")
        // },
        // {
        //   id: 3,
        //   title: "3.png",
        //   href: "wwww.baidu.com",
        //   src: require("@/assets/images/banner_01.png")
        // }
      ],
      constant: constant
    };
  },
  components: {},
  created() {
    http.get(this, {
      url: "index/bannerlist",
      dataType: "json",
      success: function(data) {
        console.log('banner:', data);
        if (data.status == 1) {
          this.$data.banners = data.info;
        }
      }
    });
  }
};
</script>
 
 <style lang="scss">
.homeBanner-wrapper {
  background-color: $c-white-light;
  padding: 0 0.2rem;
}

.el-carousel__container {
  .el-carousel__item {
    width: 100%;
    text-align: center;
    a {
      display: inline-block;
    }
    img {
      width: 100%;
    }
  }
}

.el-carousel__button {
  background-color: $c-themeBg;
}
</style>
 